<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>note-code</title>
	<style>
		section {
			width: 780px;
			height: 200px;
			background-color: black;
			color: white;
			font-size: 1.8rem;
		}

		/* 移动端 -> PC  */
		@media screen and (min-width: 750px) {
			section:nth-of-type(1) {
				background-color: salmon;
			}
		}

		@media screen and (min-width:1200px) {
			section:nth-of-type(1) {
				background-color: green;
			}
		}

		/* PC -> 移动端  */
		@media screen and (max-width:1200px) {
			section:nth-of-type(2) {
				background-color: skyblue;
			}
		}

		@media screen and (max-width:750px) {
			section:nth-of-type(2) {
				background-color: pink;
			}
		}
	</style>
</head>

<body>
	<div class="container">
		<section>
			min-width 移动端适配原则，先写移动端的样式，后写PC样式，min-width 从小到大写
		</section>
		<section>
			max-width PC端适配原则，先写PC端的样式，后写移动端样式，max-width 从大到小写
		</section>
	</div>
</body>

</html>